$(function() {
    let id = location.search
    id = id.slice(1) / 1
        // 提交获取评论
    class Publication {
        constructor() {

        }
        click() {
            let that = this;
            $(".publication").on("click", "button", function() {
                let conmon = $(this).parent().children(".user_conmon").children().eq(1).val()
                let vipName = "a";
                let goodsId = id;
                let content = conmon;
                $.post("../php/goodsAndShoppingCart/addComment.php", {
                    "vipName": `${vipName}`,
                    "goodsId": `${goodsId}`,
                    "content": `${content}`,
                }, function(resText, status) {
                    if (status.trim() == "success") {
                        // console.log(resText);
                        // that.f(resText)

                        that.up()
                    }
                })
            })

        }

        // 获取评论
        up() {
            $.get("../php/goodsAndShoppingCart/getComment.php", {
                "goodsId": `${id}`,
                "pageCount": 10,
                "pageIndex": 1

            }, function(resText, status) {
                if (status.trim() == "success") {

                    fq(resText)
                }
            }, 'json')

            function fq(data) {
                $(".conmon").html("");
                let res = JSON.parse(data.data)
                console.log(res);
                // debugger
                for (let i = res.length - 1; i >= 0; i--) {
                    let html = ``
                    html = ` <div class="user_head"><img src="../img/Details_page/132.jfif" alt=""></div>
                    <div class="user_conmon">
                        <p><img src="../img/Details_page/scoretop.png" alt=""><img src="../img/Details_page/scoretop.png" alt=""><img src="../img/Details_page/scoretop.png" alt=""><img src="../img/Details_page/scoretop.png" alt=""></p>
                        <p>${res[i].content}</p>
                    </div>
                    <div class="user_Grade">
                        <p>${res[i].commentTime}</p>
                    </div>`
                    let n = $("<div class='list_1'></div>");
                    $(".conmon").prepend(n)
                    $(".conmon").children().eq(0).html(`${html}`)
                }
            }
        }
        evenbild() {
            this.click()
            this.up()
        }
    }

    let p = new Publication()
    p.evenbild()



    //获取商品渲染页面

    $.get("../php/goodsAndShoppingCart/getGoodsInfo.php", {
        "goodsId": `${id}`
    }, function(resText, status) {
        if (status == "success")
            Detail(resText)
    })

    function Detail(data) {
        data = JSON.parse(data);
        console.log(data);
        let str = ` <div class="center">
<div class="center_header">
    <p><a href="#">首页></a><a href="#">产品系列></a>${data.goodsDesc}</p>
</div>

<div class="center_goods">
    <div class="center_goods_l">
        <div class="small_box"><img src="${data.goodsImg}" alt="">
            <div class="box"></div>
        </div>
        <ul class="goods_img">
            <li><img src="../img/Details_page/20211216191137894D1DFC7B26EC39BBF3D992A91B1C4B29D.jpg" alt=""></li>
            <li class="curn"><img src="../img/Details_page/20211216191138197CA0CD4B178AFAF4291EDBDF7B44BFB91.jpg" alt=""></li>
            <li><img src="../img/Details_page/20211216191138191D89CCA16D0108BC8AAD0340128F0E308.jpg" alt=""></li>
            <li><img src="../img/Details_page/20211216191138284BD78B9DA058B481D3EF82D9D7765FF24.jpg" alt=""></li>
            <li><img src="../img/Details_page/20211216191138425D1FF6259A3C3BE67C487F8CFCEB83226.jpg" alt=""></li>
        </ul>
        <div class="bigBox">

        </div>
        <p><a href="#"><span><img src="../img/Details_page/zy_icon.png" alt=""></span>
            <span>官方直营</span></a>
            <a href="#"> <span><img src="../img/Details_page/zp_icon.png" alt=""></span>
                <span>正品保证</span></a>
            <a href="#"><span><img src="../img/Details_page/th_icon.png" alt=""></span>
                <span>七天退换</span></a>
            <a href="#"><span><img src="../img/Details_page/fx_icon.png" alt=""></span>
                <span>分享</span></a>
            <a href="#"><span><img src="../img/Details_page/sc_icon.png" alt=""></span>
                <span>收藏</span></a>
        </p>

    </div>
    <div class="center_goods_r">
        <p class="goods_name">${data.goodsDesc}</p>
        <div class="Information">
            <div class="Price">
                <div class="Price_l">
                    <p><span>官方折扣价</span><span>￥</span><span>${data.goodsPrice}</span></p>
                    <p><span>80%</span><span>￥${data.goodsPrice/1+200}</span><span>(降价通知)</span></p>
                </div>
                <div class="Price_r">
                    <div>
                        <a href="#"><img src="../img/Details_page/coupons-btn-pc.png" alt=""></a>
                        <img src="../img/Details_page/code_icon (1).png" alt="" class="block">
                    </div>
                    <div class="hidden">
                        <img src="../img/Details_page/GetQrCode.png" alt="">
                    </div>

                </div>

            </div>
            <div class="price_b">
                <p>
                    <span>累计评价</span>
                    <span>${data.beiyong1}</span>
                </p>
                <p>
                    <span>累计售出</span>
                    <span>${data.goodsCount}</span>
                </p>

            </div>
            <p class="sales"><span>促销信息：</span></p>
        </div>
        <div class="op_select">
            <p class="img_select"><span>颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色：</span><span class="cuns"><img src="../img/Details_page/20211216191138197CA0CD4B178AFAF4291EDBDF7B44BFB91.jpg" alt=""></span><span><img src="../img/Details_page/20211217203719485D6769491555162288862AC9594BC346E.jpg" alt=""></span></p>
            <p class="img_select"><span>尺&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span><span class="cuns">39码</span><span>40码</span><span>41码</span></p>
            <p class="goods_select"><span> 我&nbsp;要&nbsp;买：</span><input type="button" value="-"><input type="text" value="1"><input type="button" value="+">件库存<span>6</span>件</p>
            <div class="maybe">
                <div class="Shopping"><a href="#"><span><img src="../img/Details_page/cart_icon.png" alt=""></span><span>加入购物车</span></a></div>
                <div class="Shopping_go"><a href="#"><span>立即购买</span></a></div>
            </div>
            <div class="maybe_s">
                <div class="Shopping_go"><a href="#"><span>超出库存</span></a></div>
            </div>
        </div>

    </div>
</div>
</div>`

        $(".main").html(`${str}`)
            // 动态添加元素后重新调用
            // 添加到购物车
        let c = new GoodsCar()
        c.evenbild()
            // 放大镜
        let fd = new Magnify();
        fd.evenbild()
            // 优惠券现实隐藏
        let h = new Hiden()
        h.evenbild()
            // 选择
        $(".img_select").children().click(function() {
            $(this).addClass("cuns").siblings().removeClass("cuns")
        })
        $(".goods_select").children().eq(1).click(function() {
            let x = $(this).next().val();
            x--;
            if (x <= 0) {
                x = 0
            }
            $(this).next().val(`${x}`)
            if (x <= $(this).nextAll().eq(2).html()) {
                $(".maybe_s").css({
                    display: "none"
                })
                $(".maybe").css({
                    display: "block"
                })
            }
        }).next().next().click(function() {
            let x = $(this).prev().val();
            x++;
            $(this).prev().val(`${x}`)
            if (x > $(this).next().html()) {
                $(".maybe").css({
                    display: "none"
                }).next().css({
                    display: "block"
                })
            }
        })

        // 商品介绍和商品评论换边框及选择卡片
        $(".click").children().eq(0).click(function() {
            $(this).addClass("til").siblings().removeClass("til")
            $(".synthesis_r_main").css({
                display: "block"
            }).next().css({
                display: "none"
            })
        }).next().click(function() {
            $(this).addClass("til").siblings().removeClass("til")
            $(".cards").css({
                display: "block"
            })
            $(".synthesis_r_main").css({
                display: "none"
            })
        })
    }
    // 添加商品到购物车
    class GoodsCar {
        constructor() {

        }
        addgoods() {
            // let vipName = $(".goods_name").html();
            let vipName = "a";
            let goodsId = id
            let goodsCount = $(".goods_select").children().eq(2).val() / 1;
            console.log(vipName, goodsId, goodsCount);
            $.post("../php/goodsAndShoppingCart/addShoppingCart.php", {
                "vipName": `${vipName}`,
                "goodsId": `${goodsId}`,
                "goodsCount": `${goodsCount}`
            }, function(resText, status) {
                if (status.trim() == "success") {
                    location.href = `ShoppingCart.html?${vipName}`
                }

            })
        }
        evenbild() {
            let that = this;
            $(".Shopping").on("click", "a", function(e) {
                e.preventDefault()
                let user = document.cookie;
                if (user != "") {
                    user = user.split("; ")
                    let name = user[0].split("=")[1]
                    let pass = user[1].split("=")[1]
                    $.post("../php/goodsAndShoppingCart/login.php", {
                        "username": `${name}`,
                        "userpass": `${pass}`
                    }, function(resText, status) {
                        if (status.trim() == "success") {
                            if (resText.trim() == "success") {
                                that.addgoods()
                            }
                        }
                    })
                } else {
                    location.href = "../html/login.html"
                }
                // let username = $.cookie("username")
                // let userpass = $.cookie("userpass")
                // console.log(username, userpass);
            })
        }
    }
    let c = new GoodsCar()
    c.evenbild()
        // 优惠券
    class Hiden {
        constructor() {
            this.time = null;
        }
        evenbild() {
            let that = this
            $(".block").mouseenter(function() {
                $(".hidden").show()
            }).mouseleave(function() {
                that.time = setTimeout(() => {
                    $(".hidden").hide()
                }, 100);
            })
            $(".hidden").mouseenter(function() {
                clearTimeout(that.time)
            }).mouseleave(function() {
                $(this).hide()
            })
        }

    }


    // 放大镜
    class Magnify {
        constructor() {

        }
        setimg() {
            $(".goods_img li").click(function() {
                let src = $(this).children().attr("src")
                $(".small_box").children().attr("src", `${src}`)
                $(this).addClass("curn").siblings().removeClass("curn")
            })
        }
        boxshow() {
            $(".small_box").mouseenter(function() {
                let src = $(this).children().attr("src")
                $(".bigBox").show()
                $(".bigBox").css({
                    'background': `url(${src}) no-repeat 10px 10px`,
                    'backgroundSize': `800px,800px`
                });
                $(".box").show()
            }).mouseleave(function() {
                $(".bigBox").hide();
                $(".box").hide()
            })

        }
        movebox() {
            $(document).mousemove(function(e) {
                let x = e.pageX
                let y = e.pageY
                let xx = $(".small_box").offset().left
                let yy = $(".small_box").offset().top
                x = x - xx - $(".box").width() / 2;
                y = y - yy - $(".box").height() / 2
                let max = $(".small_box").width() - $(".box").width()
                let may = $(".small_box").height() - $(".box").height()
                if (x > max) {
                    x = max
                } else if (x < 0) {
                    x = 0
                }
                if (y > may) {
                    y = may
                } else if (y < 0) {
                    y = 0
                }
                $(".box").css({
                    left: `${x}px`,
                    top: `${y}px`
                })
                let big_x = x * $(".bigBox").width() / $(".box").width()
                let big_y = y * $(".bigBox").height() / $(".box").height()
                $(".bigBox").css({
                    backgroundPosition: `${-big_x}px ${-big_y}px`
                })
            })
        }

        evenbild() {
            this.setimg()
            this.boxshow()
            this.movebox()
        }
    }

    let fd = new Magnify();
    fd.evenbild()





})